<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/Homepage.css">
    <title>首页页面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/css/swiper.min.css" rel="stylesheet">
</head>
<body>
    <div class="web">
        <!-- 头部 -->
        <header>
            <div class="topbox">
                <div class="imglogo">
                    <img src="./img/LOGO.png" alt="">
                </div>
                <div class="chart-box-link">
                    <input type="text" placeholder="   请输入商品名称">
                    <img src="./img/搜索矩.png" alt="">
                </div>
                <div class="drop-select">
                    <select>
                        <option>广州市</option>
                        <option>深圳市</option>
                        <option>惠州市</option>
                    </select>
                </div>
            </div>
        </header>
    <div class="maincont">
        <main>
            <div class="main-principal">
                <!-- 轮播图 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./img/形状9.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/形状9.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/形状9.png" alt="">
                        </div>
                    </div>
                    
                    <!-- 滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>
                    <!-- 优惠团购 -->
                <div class="group">
                    <div class="groupone">
                    <div class="preferential">
                        <img src="./img/团购.png" alt=""><span>优惠团购</span>
                    </div>
                    <div class="imggd">
                        <span>更多</span> <img src="./img/形状4副本.png" alt="">
                    </div>                       
                    </div>

                    <div class="imgtc">
                        <div class="imgtcone">
                            <img src="./img/图层5.png" alt="">
                            <img src="./img/图层7.png" alt="">
                        </div>
                    <div class="imgtctwo">
                        <img src="./img/图层6.png" alt="">
                        <img src="./img/图层8.png" alt="">
                    </div>
                    </div>

                    <!-- 猜你喜欢 -->
                    <div class="yourself">
                        <div class="groupone">
                            <div class="preferential">
                                <img src="./img/形状5.png" alt=""><span>猜你喜欢</span>
                            </div>
                            <div class="imggd">
                                <span>更多</span> <img src="./img/形状4副本.png" alt="">
                            </div>                       
                        </div>

                        <div class="yourselfmian">
                            <img src="./img/图层123.png" alt="">
                            <div class="yourone">
                                <p>
                                    万岁寿司（正佳店）<span> &lt; 100m </span>
                                </p>
                                <p>[100店通用] 双人套餐</p>
                                <p>
                                    ￥88.00 <span>已售1000</span>
                                </p>
                            </div>
                        </div>

                        <div class="yourselfmian">
                            <img src="./img/图层4.png" alt="">
                            <div class="yourone">
                                <p>
                                    周黑鸭（正佳店）<span> &lt; 100m </span>
                                </p>
                                <p>[100店通用] 双人套餐</p>
                                <p>
                                    ￥88.00 <span>已售1000</span>
                                </p>
                            </div>
                        </div>

                        <div class="yourselfmian">
                            <img src="./img/图层123.png" alt="">
                            <div class="yourone">
                                <p>
                                    万岁寿司（正佳店）<span> &lt; 100m </span>
                                </p>
                                <p>[100店通用] 双人套餐</p>
                                <p>
                                    ￥88.00 <span>已售1000</span>
                                </p>
                            </div>
                        </div>

                        <div class="yourselfmian">
                            <img src="./img/图层4.png" alt="">
                            <div class="yourone">
                                <p>
                                    周黑鸭（正佳店）<span> &lt; 100m </span>
                                </p>
                                <p>[100店通用] 双人套餐</p>
                                <p>
                                    ￥88.00 <span>已售1000</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
        <footer>
            <div class="homefooter">
                <div>
                    <a href="#">
                        <img src="./img/首页.png" alt="">
                        <p>首页</p>
                    </a>
                </div>
                <div>
                    <a href="file:///Users/mr.f/Desktop/fengxiayong/Grouponproject/Classifypage.html">
                        <img src="./img/分类4.png" alt="">
                        <p>分类</p>
                    </a>
                </div>
                <div>
                    <a href="file:///Users/mr.f/Desktop/fengxiayong/Grouponproject/Findpage.html">
                        <img src="./img/形状7副本.png" alt="">
                        <p>发现</p>
                    </a>
                </div>
                <div>
                    <a href="file:///Users/mr.f/Desktop/fengxiayong/Grouponproject/Mypage.html">
                        <img src="./img/我的.png" alt="">
                        <p>我的</p>
                    </a>
                </div>
            </div>
        </footer>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/js/swiper.min.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
        autoplay : 2000,
        direction: 'horizontal',
        loop: true,

          // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
        })        
        </script>
</body>
</html>